<template>
  <div class="component-detail-list-container">
    <el-dialog title="构件清单"
               :visible.sync="dialogVisible"
               width="65%"
               :before-close="handleClose">
      <el-row :gutter="20">
        <el-form ref="requestParam"
                 :model="requestParam"
                 :rules="rules"
                 disabled
                 label-width="160px">
          <el-col :span="12">
            <el-form-item label="构件类型：">
              <el-input v-model="requestParam.base_info.cp_type_name"
                        placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="生产构件编号：">
              <el-input v-model="requestParam.base_info.cp_num"
                        placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="楼号：">
              <el-input v-model="requestParam.base_info.build_no"
                        placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="层号：">
              <el-input v-model="requestParam.base_info.floor_no"
                        placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="构件设计图号：">
              <el-input v-model="requestParam.base_info.design_no"
                        placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="创建时间：">
              <el-input v-model="requestParam.base_info.created_at"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="构件长度（mm）：">
              <el-input v-model="requestParam.base_info.length"
                        placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="构件宽度（mm）：">
              <el-input v-model="requestParam.base_info.width"
                        placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="体积（m³）：">
              <el-input v-model="requestParam.base_info.volume"
                        placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="混凝土强度：">
              <el-input v-model="requestParam.base_info.concrete_strength"
                        placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="混凝土方量（m³）：">
              <el-input v-model="requestParam.base_info.concrete_volume"
                        placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="钢筋总量（吨）：">
              <el-input v-model="requestParam.base_info.prebar_weigth"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <el-col :span="24">
          <!-- type="card" -->
          <el-tabs v-model="activeName">
            <el-tab-pane label="预埋件信息"
                         name="first">
              <EmbPartsInforTable :embInfoList.sync="requestParam.emb_info_list"></EmbPartsInforTable>
            </el-tab-pane>
            <el-tab-pane label="钢筋明细"
                         name="second">
              <ReinforceDetailTable :steelDetailList.sync="requestParam.steel_detail_list"></ReinforceDetailTable>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="24"
                class="bottom-box">
          <el-button type="primary"
                     @click="onSure('requestParam')">确定</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { projectDecomApi, ProjectListApi, ProDesignDecomApi } from '@/services/ProjectCenter'
import EmbPartsInforTable from './EmbPartsInforTable';//预埋件信息
import ReinforceDetailTable from './ReinforceDetailTable';//钢筋明细
export default {
  components: {
    EmbPartsInforTable,//预埋件信息
    ReinforceDetailTable,//钢筋明细

  },
  props: {//传参
    compObjRow: {
      type: Object,
      default: () => {
        return {}
      }
    },
    lookComponentListVisible: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      activeName: 'first',
      tableData: [],
      dialogVisible: false,
      total: 0,
      requestParam: {
        page: 1,
        page_size: 10,
        com_type: ''
      },
      rules: {
        ver_no: [
          { required: true, message: '版本号不能为空', trigger: ['blur', 'change'] }
        ]
      }

    }
  },
  methods: {
    handleClose (done) {
      this.onCancel();
      this.dialogVisible = false;
      done()
    },
    onCancel () {//取消
      this.$refs.requestParam.resetFields();
      this.$emit('update:compObjRow', {});
      this.$emit('update:lookComponentListVisible', false);
    },
    onSure (data) {//确定
      this.$message.warning('操作成功');
      this.onCancel();//取消
    },
    //构件详情
    getCompDetail () {
      ProDesignDecomApi.getComDataDetail({
        params: {
          id: this.compObjRow.cp_id || ''
        }
      }).then((res) => {
        if (res.data) {
          this.requestParam = res.data;
          console.log('1-this.requestParam=', this.requestParam)
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    getCommonCompDetail () {
      let cpId = this.compObjRow.cp_id;
      if (cpId) {
        this.getCompDetail();//构件详情
      }
    }
  },
  watch: {//监听
    lookComponentListVisible (n, o) {
      this.getCommonCompDetail();//详情
      this.dialogVisible = n;
      console.log('w lookComponentListVisible=', n, 'compObjRow', this.compObjRow)
    }
  },
  created () {
    this.getCommonCompDetail();//详情
    this.dialogVisible = this.lookComponentListVisible;
    console.log('c lookComponentListVisible=', this.dialogVisible, 'compObjRow', this.compObjRow)
  }
}
</script>
<style lang="scss" scoped>
.component-detail-list-container {
  .bottom-box {
    text-align: center;
    margin-top: 20px;
  }
}
</style>